<template>
  <div class="trendItem" @click.stop="jumpToCollection">
    <div class="imgBox">
      <div class="img-artwork border-r">
        <img :src="data.img_url" alt="">
      </div>
      <div class="img-head">
        <img class="box-4" :src="data.head_url" alt="">
      </div>
    </div>
    <div class="content bg-f-8 boxS-i-4 border-r">
      <div class="namebox flex-s-between bg-5d-8 boxS-i-4 border-r font-f-ib">
        <div class="name_item flex-c-start">
          <div class="artworkname font-20 fontW-7 color-f text-s">{{data.name}}</div>
          <div class="broker" v-if="data.isBroker">
            <img src="../../assets/icon/broker.svg" alt="">
          </div>
        </div>
        <div class="owner font-14 font-f-iR color-f text-s" v-if="data.ownerName">by <span class="theme-color mgl-5">{{data.ownerName.substring(0, 4)}}</span></div>
      </div>
      <div class="desc font_spill mgtb-20 text-s font-14 fontW-b font-f-ib color-0">{{data.desc}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['data'],
  created () {
    // console.log(this.data)
  },
  methods: {
    jumpToCollection: function () {
      console.log(this.data)
      this.$router.push({
        path: '/person_collection',
        query: {
          id: this.data.ID,
          Address: this.data.Address
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.trendItem {
  width: 100%;
  height: auto;
  overflow: hidden;
  cursor: pointer;
  .imgBox {
    width: 100%;
    height: auto;
    position: relative;
    .img-artwork {
      width: 100%;
      overflow: hidden;
      height: auto;
      height: 180px;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 400ms ease 0s;
      }
    }
    .img-head {
      position: absolute;
      left: 0;
      bottom: -15px;
      width: 100%;
      height: auto;
      overflow: hidden;
      img {
        display: block;
        margin: 0 auto;
        border-radius: 50%;
        width: 47px;
        height: 47px;
        object-fit: cover;
      }
    }
  }
  .content {
    width: 100%;
    height: auto;
    overflow: hidden;
    .namebox {
      height: 35px;
      line-height: 35px;
      padding: 0 3%;
      .name_item {
        .artworkname {
          min-width: 140px;
          max-width: 195px;
          height: 35px;
          line-height: 35px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .broker {
          margin-left: 6px;
          img {
            width: 14px;
            height: 14px;
            display: inherit;
          }
        }
      }
      // .owner {
      //   span {}
      // }
    }
    .desc {
      padding: 0 3%;
      height: 57px;
      line-height: 19px;
      overflow: hidden;
    }
  }
}
</style>
